import React,{ useState, useCallback } from 'react'

/**
 * useCallback
 */

import Hello from './components/Hello'

export default function LayOut() {
  const [count, setCount] = useState(0)
  const [val, setVal] = useState("")

  const total =useCallback(() => {
    console.log("total")  // 改变 count，Hello也不会重新渲染了
  }, [count]) // 如果 数组里面写上 count，那么count变，我才执行
 
  return (
    <div>
        LayOut

        <button onClick={() => {setCount(a => ++a)}} > +1 </button>
        <div>count的值：{count}</div>
        <input type="text" value={val} onChange={(e) => {setVal(e.target.value)}} />
        <Hello total={total} />
    </div>
  )
}
